<!DOCTYPE html>
<html lang="ch-CN">
<head>
  <meta charset="UTF-8">
  <title>11事件的绑定</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  #container {
    width: 800px;
    height: 500px;
    background-color: wheat;
    font-size: 30px;
    /*文本透明*/
    /*text-decoration: none;*/
    font-family: "华文楷体";
    position: relative;
  }

  #box1 {
    width: 100px;
    height: 100px;
    background-color: #b3b1af;
    border: solid 1px black;
    text-align: center;
  }

  #box2 {
    width: 100px;
    height: 100px;
    background-color: #b3b1af;
    border: solid 1px black;
    position: absolute;
    margin-left: 45%;
    margin-top: 15%;
    text-align: center;
  }

</style>
<body>
<div id="container">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</div>
<script>
let box1=document.getElementById("box1")
let box2=document.getElementById("box2")
function wheel(box){
  box.onwheel=function (event){
    // alert(event.deltaY)
    let height=box.offsetHeight
    if (event.deltaY>0){
      console.log(event.deltaY)
      box.style.height=height+10+"px"
    }else {
      console.log(event.deltaY)
      box.style.height=height-10+"px"
    }
  }
}
wheel(box1)
wheel(box2)
</script>
</body>